<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title>
</head>
<style>
    /* css原生也支持变量的设置 */
    html{
        --color:#bfd;
    }

.box1{
    width: 100px;
    height: 100px;
    background-color: var(--color);
    margin-bottom: 10px;
    
}
.box2{
    width: 100px;
    height: 100px;
    background-color: #bfd;
    margin-bottom: 10px;
}
.box3{
    width: 100px;
    height: 100px;
    background-color: rgb(74, 122, 196);
}
</style>
<body>
    <!-- less是一门css的预处理语言
    编写更少的代码实现更强大的样式
    对变量的支持，对mixin的支持 
要执行less代码，必须先转换成css-->
    <div class="box1">ccc</div>
    <div class="box2">bbb</div>
    <div class="box3">aaa</div>
</body>
</html>